<template>
	<view class="content">
		<view class="row">
			<text class="tit">联系人</text>
			<input type="text" class="input" placeholder="收货人姓名" value="" />
		</view>
		<view class="row">
			<text class="tit">手机号</text>
			<input type="phone" class="input" placeholder="收货人手机号码" value="" />
		</view>
		<view class="content_list">
			<view class="content_list_label" @click="addressShow = true">选择地址</view>
			<view class="content_list_content">
				{{address}}
				<pickerAdd v-model="addressShow" @confirm="addresspick" />
			</view>
		</view>

		<view class="row">
			<text class="tit">详细地址</text>
			<input type="text" class="input" placeholder="小区楼栋/乡村名称" value="" />
		</view>
		<button type="primary"
			style="background-color: #fa436a;width: 320rpx;height: 80rpx; border-radius: 50rpx;line-height: 80rpx; font-size: 44rpx;margin-top: 50rpx;"
			@click="dataClick">保存</button>
	</view>
</template>

<script>
	import pickerAddress from '../../components/wangding-pickerAddress/wangding-pickerAddress.vue';
	import pickerAdd from '@/components/liudx-pickerAddress/index.vue'
	export default {
		data() {
			return {
				addressShow: false,
				form: {
					province: '',
					city: '',
					area: '',
				},
				address: '省/市/县'
			}

		},
		components: {
			pickerAddress,
			pickerAdd
		},
		onload: function(options) {

		},
		methods: {
			change(data) {
				this.txt = data.data.join('')
				console.log(data.data.join(''))
			},
			addresspick(obj) {
				let arr = ['province', 'city', 'area'];
				let place = '';
				arr.map(key => {
					this.form[key] = obj[key].AreaId
					place += obj[key].AreaName
				})
				this.address = place
			},
		}
	}
</script>

<style lang="scss" scoped>
	.row {
		display: flex;
		height: 100rpx;
		border-bottom: 2rpx solid #E5E5E5;
		line-height: 100rpx;
	}

	.tit {
		flex: 3;
		font-size: 38rpx;
		margin-left: 20rpx;
	}

	.input {
		flex: 7;
		font-size: 36rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.add {
		position: fixed;
		color: #888;
	}

	.content {
		&_list {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			font-size: 38rpx;
			border-bottom: 2rpx solid #E5E5E5;
			height: 100rpx;
			line-height: 100rpx;
			margin-left: 20rpx;
			&_lable {
				flex: 3;

			}

			&_content {
				flex: 7;
				width: auto;
				text-align: left;
				margin-left: 80rpx;
				font-size: 36rpx;
				color: #888;
			}
		}
	}
</style>
